<template>
  <div>
    <MsgList :barData="barData" :msgData="data" @msgClick="onMsgClick" @msgRemove="onMsgRemove" @barClick="onBarClick"></MsgList>
  </div>
</template>

<script setup name="Msg">
import { reactive } from 'vue';
import { Dialog } from 'vant';
import { useRouter } from 'vue-router'; // 导入 useRouter
import MsgList from "@/components/MsgList/index.vue"

const router = useRouter(); // 创建路由实例

const barData = reactive([
  {
    title: '今天是你的生日，点击领取礼品！',
    icon: 'birthday-cake-o'
  },
  {
    title: '定位已开启',
    icon: 'guide-o'
  }
]);

const data = reactive([
  {
    userId: '9b54c39939c3776bd706ad315452cde8',
    avatar: './msg/avatar1.jpeg',
    nickName: '中科车检',
    newestMsg: '您的车检报告已出炉，点击查看',
    unReadCount: 2,
  },
  {
    userId: '795d2d2f7711170a99958f8c8d195414',
    avatar: './msg/avatar2.jpeg',
    nickName: 'Amanda',
    newestMsg: '田晨阳是最弔的！',
    unReadCount: 0,
  },
  {
    userId: 'c4dec0b791ad3df3d4e1bace20dc9c69',
    avatar: './msg/avatar3.jpeg',
    nickName: 'Christine',
    newestMsg: 'Hello~，要买车吗',
    dot: true
  },
]);

function onMsgClick(item) {
  if (item.nickName === 'Christine') {
    Dialog({ message: `即将跳转到 瓜子二手车` });
    router.push('/work/twocar');
  } else {
    Dialog({ message: `${item.nickName}被点击！` });
  }
}

function onMsgRemove(item) {
  Dialog({ message: `${item.nickName}被移除！` });
}

function onBarClick(item) {
  Dialog({ message: `${item.title}被点击！` });
}
</script>

<style>

</style>